<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue讲解</title>
<link href="./css/base.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div>
    <div class="hd1">参考</div>
    <a href="https://zhuanlan.zhihu.com/p/465920046" target="_blank">Vue 事件处理</a>
</div>

<h1 >html写法</h1>
<input type="button" value="html事件" id="but1" onclick="htmlclick()" ondblclick="htmldblclick()">
<div id="html1"></div>

<div id="first">
    
    <h1>vue鼠标事件 v-on</h1>
    <input type="button" v-on:click="vueclick1" class="button" value="v-on"></input>
    <div>{{event1}}</div>

    <h1>vue鼠标事件 @</h1>
    <input type="button" class="button" value="@" @click="vueclick2"  @dblclick="vueclick22"  ></input>
    <div>{{event2}}</div>

    <h1>vue鼠标事件 执行</h1>
    <input type="button" class="button" value="执行" @click="event3='直接赋值'"   ></input>
    <div>{{event3}}</div>

    <h1>vue鼠标事件 传参</h1>
    <input type="button" class="button" value="执行" @click="vueclick4('hello click')"   ></input>
    <div>参数:{{event4}}</div>

    <h1>vue鼠标事件 默认鼠标参数</h1>
    <input type="button" class="button" value="执行" @click="vueclick5('click',$event)"   ></input>
    <div>参数:{{event5}}</div>

    <h1>vue鼠标事件 无修饰符</h1>
    <input type="button" class="button" value="点击次数" @click="event6++"   ></input>
    <div>我被点击了 {{event6}} 次</div>

    <h1>vue鼠标事件 修饰符once</h1>
    <input type="button" class="button" value="点击次数" @click.once="event7++"   ></input>
    <div>我被点击了 {{event7}} 次</div>

</div>
<script type="text/javascript">
    function htmlclick(){
        // alert("html点击事件");
        let dom=document.getElementById('html1')
        dom.innerHTML='按钮被点击'
    }
    function htmldblclick(){
        let dom=document.getElementById('html1')
        dom.innerHTML='按钮被双击'
    }
</script>

<script type="text/javascript">
    new Vue({
        el:'#first',
        data:{
            event1:"",
            event2:"",
            event3:'',
            event4:'',
            event5:'',
            event6:0,
            event7:0
        },
        methods:{
            vueclick1(){
                this.event1='v-on被点击'
            },
            vueclick2(){
                this.event2='@被点击'
            },
            vueclick22(){
                this.event2="@被双击"
            },
            vueclick4(val){
                this.event4=val
            },
            vueclick5(val,event){
                this.event5=val
                console.log(event)
            }
        }
    })
</script>
</body>
</html>